<template>
  <div class="app-container">
        <div class="cbox">
          <el-form class="form" ref="form" :model="from" label-width="6rem" :inline="true" size="mini">

                <el-form-item label="车次:">
                  <el-input  placeholder="请输入车次" v-model="from.tbbTrain"  clearable></el-input>
                </el-form-item>

                <el-form-item label="始发站:">
                  <el-input   placeholder="请输入始发站" v-model="from.tbbOriginstation"  clearable></el-input>
                </el-form-item>

                <el-form-item label="终点站:">
                  <el-input   placeholder="请输入终点站" v-model="from.tbbFinishstation"  clearable></el-input>
                </el-form-item>

                <el-form-item label-width="10px">
                  <el-button @click="searchType" type="primary">查询</el-button>
                </el-form-item>

          </el-form>
        </div>
        <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="success" plain @click="add">新增</el-button>
                  <el-button size="mini" type="primary" plain @click="edit">编辑</el-button>
                  <el-button plain size="mini" type="danger" @click="del">删除</el-button>
                </el-col>
          </el-row>
        <div class="table" ref="topType">
            <div class="inner" ref="inner">
                  <el-table
                      :data="DetailedData"
                      border
                      :height="maxHeight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-dblclick='rowdbClick'
                      @row-click="rowClick">
                      <el-table-column type="index" :index="indexMethod" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="tbbTrain"  show-overflow-tooltip label="车次"></el-table-column>
                      <el-table-column prop="tbbType"  show-overflow-tooltip label="列车类型"></el-table-column>
                      <el-table-column prop="tbbOriginstation"  show-overflow-tooltip label="始发站"></el-table-column>
                      <el-table-column prop="tbbOrigincity"  show-overflow-tooltip label="始发城市"></el-table-column>
                      <el-table-column prop="tbbLoadtrain"  show-overflow-tooltip label="装车组织站"  min-width="150"></el-table-column>
                      <el-table-column prop="tbbFinishcity"  show-overflow-tooltip label="终到城市"></el-table-column>
                      <el-table-column prop="tbbFinishstation"  show-overflow-tooltip label="终点站"></el-table-column>
                      <el-table-column prop="tbbUpdown"  show-overflow-tooltip label="上下行"></el-table-column>
                      <el-table-column prop="tbbOpencycle"  show-overflow-tooltip label="开行周期(列/周)" min-width="140" ></el-table-column>
                      <el-table-column prop="tbbMincompiled"  show-overflow-tooltip label="最小编成数(车)"  min-width="120"></el-table-column>
                      <el-table-column prop="tbbMaxcompiled"  show-overflow-tooltip label="最大编成数(车)"  min-width="120"></el-table-column>
                      <el-table-column prop="tbbOperationhours"  show-overflow-tooltip label="运行时间(小时)"  min-width="120"></el-table-column>
                      <el-table-column prop="tbbFreightmileage"  show-overflow-tooltip label="铁路货运里程(公里)"  min-width="200"></el-table-column>
                      <el-table-column prop="tbbInsertdt"  show-overflow-tooltip label="输入时间"  min-width="200"></el-table-column>
                      <el-table-column prop="tbbInsertuser"  show-overflow-tooltip label="输入员工"></el-table-column>
                      <el-table-column prop="tbbLstupddt"  show-overflow-tooltip label="最后修改时间"  min-width="200"></el-table-column>
                      <el-table-column prop="tbbLstupduser"  show-overflow-tooltip label="最后修改员工"  min-width="200"></el-table-column>
                  </el-table>
            </div>
        </div>
          <!-- 分页 -->
          <el-pagination
            class="pagination"
            small
            background
            ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.pageSize"
            :layout="Pagination.layout"
            :total="Pagination.total"
          ></el-pagination>

        <!-- 弹出框 新增 编辑 查看-->
        <el-dialog
          :title='addText'
          :visible.sync="addShowA"
          v-if="addShowA"
          v-el-drag-dialog
          :close-on-click-modal="false"
          @row-click="rowClick">
              <el-form  label-width="15rem" :model="xzData"  ref="xzData"  size="mini" :rules="addRules">
                  <el-row>
                      <el-col :span="12">
                        <el-form-item prop="tbbTrain" label="车次：" >
                          <el-input maxlength="32"  v-model="xzData.tbbTrain" clearable @change="uppercase('tbbTrain')"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="tbbType" label="列车类型：" >
                          <el-select style="width: 100%;" filterable allow-create clearable v-model="xzData.tbbType">
                              <el-option
                              v-for=" item in listData"
                              :key="item.code"
                              :value="item.code"
                              :label="item.name"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item prop="tbbLoadtrain" label="装车组织站：">
                          <el-input maxlength="50" style="width: 100%;" v-model="xzData.tbbLoadtrain" clearable></el-input>
                            <!-- <template>
                              <div class="box">
                                  <el-button size="mini" type="primary" @click="YZData" plain>选择</el-button>
                              </div>
                            </template> -->
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="tbbLoadtraindbm" label="装车组织站电报码：">
                          <el-input maxlength="32"  v-model="xzData.tbbLoadtraindbm" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="始发站：" prop="tbbOriginstation">
                            <el-input maxlength="32" style="width: 100%;"  v-model="xzData.tbbOriginstation" clearable ></el-input>
                            <!-- <template>
                              <div class="box">
                                  <el-button size="mini" type="primary" @click="YZData" plain>选择</el-button>
                              </div>
                            </template> -->
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="始发站电报码：" prop="tbbOriginstationdbm">
                            <el-input maxlength="32" v-model="xzData.tbbOriginstationdbm" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="始发城市：" prop="tbbOrigincity">
                            <el-input maxlength="32" v-model="xzData.tbbOrigincity" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="tbbFinishstation" label="终点站：">
                          <el-input maxlength="32"  style="width: 100%;"  v-model="xzData.tbbFinishstation" clearable></el-input>
                          <!-- <template>
                              <div class="box">
                                  <el-button size="mini" type="primary" @click="YZData" plain>选择</el-button>
                              </div>
                            </template> -->
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="终点站电报码：" prop="tbbFinishstationdbm" >
                          <el-input maxlength="32"  v-model="xzData.tbbFinishstationdbm" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="tbbFinishcity" label="终到城市：" >
                          <el-input maxlength="32"  v-model="xzData.tbbFinishcity" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="速度标尺(千米/时)：" prop="tbbSpeed" >
                          <el-input maxlength="3" v-model="xzData.tbbSpeed" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="tbbOpencycle" label="开行周期(列/周)：" >
                          <el-input maxlength="2"  v-model="xzData.tbbOpencycle" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="最小编成量数：" prop="tbbMincompiled" >
                          <el-input maxlength="3"  v-model="xzData.tbbMincompiled" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="tbbMaxcompiled" label="最大编成量数：" >
                          <el-input maxlength="3"  v-model="xzData.tbbMaxcompiled" clearable ></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="编组内容：" prop="tbbGroupcontent" >
                          <el-input maxlength="200"  v-model="xzData.tbbGroupcontent" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="tbbUpdown" label="班列上下行：" >
                          <el-select style="width: 100%;" filterable allow-create clearable v-model="xzData.tbbUpdown">
                              <el-option
                              v-for=" item in listDataA"
                              :key="item.code"
                              :value="item.code"
                              :label="item.name"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                        <el-form-item label="运行时间(小时)：" prop="tbbOperationhours" >
                          <el-input maxlength="3"  v-model="xzData.tbbOperationhours" clearable @change="formateHour"></el-input>
                        </el-form-item>
                      </el-col>
                    <el-col :span="12">
                        <el-form-item prop="tbbFreightmileage" label="铁路货运里程(公里)：" >
                          <el-input maxlength="5"  v-model="xzData.tbbFreightmileage" clearable @change="formateDistance"></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                        <el-form-item prop="tbbRemark" label="备注：">
                          <el-input maxlength="200" type="textarea" v-model="xzData.tbbRemark" clearable></el-input>
                        </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
                  <div slot="footer" class="dialog-footer">
                      <el-button type="primary" v-if="see" @click="saveEditor('xzData')" size="mini">保存</el-button>
                      <el-button  @click="close" size="mini">关闭</el-button>
                  </div>
        </el-dialog>

        <!-- 二级弹出框 -->
        <el-dialog
          :title='addText'
          :visible.sync="addShowB"
          v-if="addShowB"
          v-el-drag-dialog
          :append-to-body="true"
          :close-on-click-modal="false"
          :before-close="confirm"
          >
          <div class="cbox">
              <el-form class="form" ref="form" :model="fromA" label-width="8rem" size="mini">
                <el-row  class="row">
                  <el-col :span="6">
                    <el-form-item label="电报码">
                      <el-input   placeholder="请输入电报码" v-model="from.Code"  clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="货站站名">
                      <el-input   placeholder="请输入货站站名" v-model="from.SFname"  clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="所属省">
                      <el-input   placeholder="请输入所属省" v-model="from.ZDname"  clearable></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <el-form-item label-width="10px">
                      <el-button @click="searchType" type="primary">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
          </div>
          <h4>班列信息列表</h4>
          <el-row :gutter="10" class="btn-area">
                <el-col :span="24">
                  <el-button size="mini" type="primary" plain @click="confirm">确认</el-button>
                </el-col>
           </el-row>
          <div class="table" ref="topType">
            <div class="inner" ref="inner">
                  <el-table
                      :data="DetailedDataA"
                      border
                      :height="400"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      >
                      <el-table-column type="index" :index="indexMethod" show-overflow-tooltip  label="序号" width="50"></el-table-column>
                      <el-table-column prop="noTitle"  show-overflow-tooltip label="电报码"></el-table-column>
                      <el-table-column prop="noContent"  show-overflow-tooltip label="货站站名"></el-table-column>
                      <el-table-column prop="noInsertdt"  show-overflow-tooltip label="所属省"></el-table-column>
                  </el-table>
          </div>
          <el-pagination
            class="pagination"
            v-if="addShowB"
            small
            background
            ref="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.pageSize"
            :layout="Pagination.layout"
            :total="Pagination.total"
          ></el-pagination>
        </div>
        </el-dialog>
  </div>
</template>

<script>
import {
  GetClassColumnModelList,AddClassColumn,EditClassColumn,DeleteClassColumn
} from '@/request/api'
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
export default {
  mixins: [resizeMixin,paginationMixin],
  data(){
    return{
      from:{
        tbbTrain:'',
        tbbOriginstation:'',
        tbbFinishstation:'',
      },
      fromA:{
        Code:'',
        SFname:'',
        ZDname:'',
      },
      listData:[
        {code:'班列',name:'班列'},
        {code:'散列',name:'散列'}
      ],
      listDataA:[
        {code:'上行',name:'上行'},
        {code:'下行',name:'下行'}
      ],
      maxHeight:-1,
      DetailedData:[], //主列表的数据
      DetailedDataA:[],//二级弹窗列表数据
      diong:'E',
      addText:'',
      addShowA:false, // 新增 编辑
      addShowB:false, // 二级弹窗
      see:true, //保存按钮
      xzData:[],
      addRules:{
        tbbTrain:[
          { required: true, message: '请填写车次', trigger:'blur'}
        ],
        tbbType:[
          { required: true, message: '请选择列车类型', trigger:'change'}
        ],
        tbbLoadtrain:[
          { required: true, message: '请填写装车组织站', trigger:'blur'}
        ],
        tbbLoadtraindbm:[
          { required: true, message: '请填写装车组织站电报码', trigger:'blur'}
        ],
        tbbOriginstation:[
          { required: true, message: '请填写始发站', trigger:'blur'}
        ],
        tbbOriginstationdbm:[
          { required: true, message: '请填写始发站电报码', trigger:'blur'}
        ],
        tbbOrigincity:[
          { required: true, message: '请填写始发城市', trigger:'blur'}
        ],
        tbbFinishstation:[
          { required: true, message: '请填写终点站', trigger:'blur'}
        ],
        tbbFinishstationdbm:[
          { required: true, message: '请填写终点站电报码', trigger:'blur'}
        ],
        tbbFinishcity:[
          { required: true, message: '请填写终到城市', trigger:'blur'}
        ],
        tbbSpeed:[
          { required: true, message: '请填写速度标尺', trigger:'blur'},
          {pattern:/^([0-9]+)|([0-9]+\.[0-9]+)$/,message:'请输入数字',trigger:'blur'}
        ],
        tbbOpencycle:[
          { required: true, message: '请填写开行周期', trigger:'blur'},
          {pattern:/^([0-9]+)|([0-9]+\.[0-9]?)$/,message:'请输入数字',trigger:'blur'}
        ],
        tbbMincompiled:[{pattern:/^([0-9]+)|([0-9]+\.[0-9]?)$/,message:'请输入数字',trigger:'blur'}],
        tbbMaxcompiled:[{pattern:/^([0-9]+)|([0-9]+\.[0-9]?)$/,message:'请输入数字',trigger:'blur'}],
        tbbUpdown:[
          { required: true, message: '请选择班列上下行', trigger:'change'}
        ],
        tbbOperationhours:[{pattern:/^([0-9]+)|([0-9]+(\.)?[0-9]+)$/,message:'请输入数字',trigger:'blur'}],
        tbbFreightmileage:[{pattern:/^([0-9]+)|([0-9]+(\.)?[0-9]+)$/,message:'请输入数字',trigger:'blur'}]
      }
    }
  },
  created(){
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted(){
    this.refreshList()
  },
  methods:{
    //时间
    formateHour(name){
      if(name){
        var arr = name.split('.')
        if(arr.length>1){
          console.log(arr)
        }
      }
      // if(name)

    },
    //里程
    formateDistance(name){
      if(name){
        var arr = name.split('.')
        if(arr.length>1){
          console.log(arr)
        }
      }
    },
    //删除
    del(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要删除的数据','提示',{
          confirmButtonText:'确定'
        })
        return
      }
      this.$confirm('您确定进行删除操作？','提示',{
        confirmButtonText:'确定'
      }).then(()=>{
        DeleteClassColumn({tbbId:this.currentData.tbbId}).then(res=>{
          if(res.success==='1'){
            this.$message({
              type:'success',
              message:'删除数据成功'
            })
            this.close()
          }
        })
      })
    },
    //单行选择
    rowClick(row){
      this.currentData=Object.assign({},row)
    },

    //保存
    saveEditor(obj){
      this.$refs[obj].validate(valid=>{
        if(valid){
          if(this.diong==='E'){
            //编辑
            EditClassColumn(this.xzData).then(res=>{
              if(res.success==='1'){
                this.$message({
                  type:'success',
                  message:'编辑数据成功'
                })
                this.close()
              }
            })
          }else{
            //新增
            AddClassColumn(this.xzData).then(res=>{
              if(res.success==='1'){
                this.$message({
                  type:'success',
                  message:'新增数据成功'
                })
                this.close()
              }
            })
          }
        }
      })
    },
    //点击选择出现二级弹出框
    YZData(){
      this.addText = '查看站点信息'
      this.addShowB = true
      this.refreshList()
    },
    confirm(){
      this.addShowB = false
      // this.refreshList()
    },

    // 切换大写
    uppercase(key) {
      this.xzData[key] = this.xzData[key].toUpperCase()
    },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      this.currentData = {}
      if(this.addShowB){
        //查询站点

      }
      GetClassColumnModelList({
        tbbTrain:this.from.tbbTrain,
        tbbOriginstation:this.from.tbbOriginstation,
        tbbFinishstation:this.from.tbbFinishstation,
        PageIndex:this.Pagination.currentPage,
        PageSize:this.Pagination.pageSize
      }).then(response => {
        this.DetailedData = response.data
        updateTotal(Number(response.total))
      })

    },
    //点击搜索
    searchType(){
      this.refreshList()
    },
    //编辑
    edit(){
      if(Object.keys(this.currentData).length===0){
        this.$alert('请选择需要编辑的数据','提示',{
          confirmButtonText:'确定'
        })
        return
      }

      this.addText = '编辑班列基础信息'
      this.addShowA = true
      this.see = true
      this.diong='E'
      this.xzData=this.currentData
    },
    //新增
    add(){
      this.addText = '新增班列基础信息'
      this.addShowA = true
      this.see = true
      this.diong=''
      this.xzData={
        tbbTrain:'',
        tbbType:'',
        tbbLoadtrain:'',
        tbbLoadtraindbm:'',
        tbbOriginstation:'',
        tbbOriginstationdbm:'',
        tbbOrigincity:'',
        tbbFinishstation:'',
        tbbFinishstationdbm:'',
        tbbFinishcity:'',
        tbbSpeed:'',
        tbbOpencycle:'',
        tbbMincompiled:'',
        tbbMaxcompiled:'',
        tbbGroupcontent:'',
        tbbUpdown:'',
        tbbOperationhours:'',
        tbbFreightmileage:'',
        tbbRemark:''
      }
    },
    //关闭弹出框
    close(){
      this.currentData={}
      this.addShowA = false
      this.refreshList()
    }
  }
}
</script>

<style  lang="scss" scoped>
// .el-select {
//   width: 100%;
// }
.app-container {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
    position: relative;
    overflow: hidden;
    .inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .el-pagination {
      height: 4rem;
      flex: 0 0 auto;
      margin: 1rem 0;
    }
  }
}
.box{
  position: absolute;
  top:0px;
  right: 0px;
}
</style>
